<template>
  <div class="app-container">
    <NavBar v-if="!isAuthPage" />
    <div :class="{ 'content-container': !isAuthPage }">
      <router-view></router-view>
    </div>
    <!-- <FooterBar v-if="!isAuthPage" /> -->
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { getToken } from "@/utils/auth.js";
import NavBar from '@/components/common/NavBar.vue';
import FooterBar from '@/components/common/FooterBar.vue';

const router = useRouter();
const route = useRoute();
const store = useStore();

// 判断是否是认证页面（登录/注册）
const isAuthPage = computed(() => {
  // console.log("route",route.name);
  return ['Login', 'Register'].includes(route.name);
});

onMounted(async () => {
  // 检查是否有token
  const token = getToken();
  
  // 如果有token但没有用户信息，则获取用户信息
  if (token && !store.state.userInfo) {
    try {
      await store.dispatch('getUserInfo');
    } catch (error) {
      console.error('获取用户信息失败，可能token已过期:', error);
      store.dispatch('logout');
      if (router.currentRoute.value.path !== '/login') {
        router.push('/login');
      }
    }
  }
  
  // 如果没有token且不在登录页，则跳转到登录页
  if (!token && router.currentRoute.value.path !== '/login' && router.currentRoute.value.path !== '/register') {
    router.push('/login');
  }
});
</script>

<style lang="scss">
.app-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-container {
  flex: 1;
  padding-top: 60px; /* 为固定导航栏留出空间 */
  min-height: calc(100vh - 60px); /* 减去导航栏高度 */
}
</style>

